
<template>
  <div>
    <Row justify="center">
      <Col span="12" style="margin-top:6px;">
      <!-- <CheckboxGroup v-model="social" align="left">
        <Checkbox label="UNPUBLISH">
          <span>未发布</span> 
        </Checkbox>
        <Checkbox label="PUBLISH">
          <span>已发布</span>
        </Checkbox>
      </CheckboxGroup> -->
      </Col>
      <Col span="12" align="right"> 
      <Button type="info" @click="modalAdd = true">添加话术</Button>
      </Col>
    </Row>
    <br>
    <Table  border :columns="columns" :data="data6"></Table>
    <br>
    <Page :total="count" placement="top" :page-size-opts="opts" size="small" :page-size="size" show-total show-elevator show-sizer   @on-change="changePage" @on-page-size-change="changeSize"></Page>
    <Modal v-model="modalAdd" title="添加话术" @on-ok="ok" :loading="loading" @on-cancel="cancel">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="话术名称" prop="name">
          <Input v-model="formValidate.name" placeholder="请输入话术名称"></Input>
        </FormItem>
        <FormItem label="开始语" prop="startWord">
          <Input v-model="formValidate.startWord" type="textarea" :autosize="{minRows: 2,maxRows: 3}" placeholder="请输入话术开始语"></Input>
        </FormItem>
        <FormItem label="结束语" prop="endWord">
          <Input v-model="formValidate.endWord" type="textarea" :autosize="{minRows: 2,maxRows: 3}" placeholder="请输入话术结束语"></Input>
        </FormItem>
        <FormItem label="可看群组" >
          <Row>
            <Col span="7">
                <Tree show-checkbox :data="treedata"  multiple ref="tree" @on-check-change="getAllSelect"></Tree>
            </Col>
            <!-- <Col span="4">
                <Button type="info" @click="getGroup">
                  <Icon type="arrow-right-c" size="20" ></Icon>
                </Button>
            </Col> -->
            <Col span="17">
                <Table :loading="TablePersonloading" :height="manTableHeight" border ref="selection" :columns="columns4" :data="data1" @on-selection-change="select"></Table>
            </Col>
          </Row>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import wordoperation from "service/wordoperation.js";
import {
    mapGetters
  } from 'vuex'
export default {
  name: "wordoperation",
  data() {
    return {
      page: 0,
      size: 10,
      count:0,
      opts:[10],
      modalAdd: false,
      loading: true,
      Tableloading: true,
      social: ["", ""],
      manTableHeight:"150",
      grpupId:[],
      groupManageId:[],
      TablePersonloading:false,
      columns: [
        {
          title: "创建时间",
          key: "createDate",
          align: "center"
        },
        {
          title: "话术名称",
          key: "name",
          align: "center"
        },
        {
          title: "话术开始语",
          key: "startWord",
          align: "center"
        },
        {
          title: "内容话术结束语",
          key: "endWord",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 300,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",

                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],

      formValidate: {
        endWord: "",
        startWord: "",
        name:""
      },

      ruleValidate: {
        name: [
          { required: true, message: '请输入话术名称', trigger: 'blur' },
          {
            type: "string",
            max: 20,
            message: "不能多与20字符",
            trigger: "blur"
          }
        ],
        startWord: [
          {
            required: true,

            message: "请输入话术开始语",

            trigger: "blur"
          },

          {
            type: "string",

            min: 1,

            message: "不能少于1个字符",

            trigger: "blur"
          },
          {
            type: "string",

            max: 50,

            message: "不能多与50字符",

            trigger: "blur"
          }
        ],
        endWord: [
          {
            required: true,

            message: "请输入话术结束语",

            trigger: "blur"
          },

          {
            type: "string",

            min: 1,

            message: "不能少于1个字符",

            trigger: "blur"
          },
          {
            type: "string",

            max: 50,

            message: "不能多与50字符",

            trigger: "blur"
          }
        ]
      },
      treedata: [],
      data6: [],
      columns4: [
          {
              type: 'selection',
              width: 60,
              align: 'center'
          },
          {
              title: '姓名',
              key: 'userName',
              align:'center'
          }
      ],
      data1: [],
    };
  },
  computed: {
    ...mapGetters({
      loginUserInfo: 'loginUserInfo',
    }),
  },
  methods: {
    // 删除事件
    async remove(row) {
      let vm = this;
      let id = row.id;
      let jsondata = await wordoperation.delete(id);
      this.$Message.info("已删除");
      this.getWordList();
    },
    changeLoading() {
      this.loading = false;
      this.$nextTick(() => {
        this.loading = true;
      });
    },
    // 添加话术
    ok() {
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          // 请求接口
          if(this.grpupId.length){
              this.addWrod();
          }else{
            this.$Message.error("请选择可看人组");
            return this.changeLoading();
          }
        } else {
          return this.changeLoading();
        }
      });
    },
    // 取消添加
    cancel() {
      this.$refs["formValidate"].resetFields();
    },
    getAllSelect(response){
        this.TablePersonloading=true;
        let SelectedNode= response;
        let vm = this;
        vm.groupManageId=[];
        SelectedNode.forEach(function(item){
          vm.groupManageId.push(item.attr)
        })
        vm.getOrganizationPerson(vm.groupManageId)
    },
    changePage(response) {
      var _that = this;
      _that.page = response-1;
      _that.getWordList();
    },
    changeSize(response) {
      var _that = this;
      _that.size = response;
      _that.getWordList();
    },
    async getWordList() {
        let search_data={
           pageNumber:this.page,
           pageSize:this.size
        };
        let vm = this;
        let status_array;
        if(vm.social.length){
          status_array=vm.social;
        }else{
          status_array="";
        }
        let jsondata = await wordoperation.list(search_data,status_array);
        vm.Tableloading=false;
        vm.count=jsondata.totalElements
        vm.data6=jsondata.content;
    },
    // 查询结构图
    async getOrganizationList() {
        let vm = this;
        let jsondata = await wordoperation.getOrganizationList();
        vm.treedata = getTree(jsondata);
        function getTree(tree = []) {
            let arr = [];
            if (!!tree && tree.length !== 0) {
                tree.forEach(item => {
                    let obj = {};
                    obj.title = item.text;
                    obj.attr = item.id; // 其他你想要添加的属性
                    obj.expand = false;
                    obj.children = getTree(item.children); // 递归调用
                    arr.push(obj);
                });
            }
            return arr;
        }
    },
    async addWrod() {
        let vm = this;
        let addData={
            name:this.formValidate.name,
            startWord: this.formValidate.startWord,
            endWord: this.formValidate.endWord,
            users: this.grpupId,
        };
        let jsondata = await wordoperation.add(addData);
        if(jsondata.id){
        vm.changeLoading();
        vm.modalAdd = false;
        vm.$Message.success("添加成功");
        vm.$refs["formValidate"].resetFields();
        this.getWordList();
        }else{
          this.$Message.error("添加失败");
          return this.changeLoading();
        }
        
    },
    // 查询结构图下的人
    async getOrganizationPerson(id_list) {
        let vm = this;
        let idStr="";
        id_list.forEach(function(ele,index){
            var ico_ = index ? ",":""
            idStr=idStr+ico_+ele
        });
        let jsondata = await wordoperation.getOrganizationPerson({ orgIdList: idStr});
           vm.data1 =  jsondata ;
           vm.TablePersonloading=false;
    },
    select(selection){
    var vm= this;
    vm.grpupId=[];
     selection.forEach(function(ele){
        vm.grpupId.push(ele.userId)
     })
    },
    getGroup:function(){
     let SelectedNode= this.$refs.tree.getSelectedNodes();
     let vm = this;
     vm.groupManageId=[];
     SelectedNode.forEach(function(item){
      vm.groupManageId.push(item.attr)
     })
     if(vm.groupManageId.length){
        vm.getOrganizationPerson(vm.groupManageId)
     }else{
        this.$Message.warning('请先选择组织架构');
        
     }
    },
  },
  mounted: function() {
    this.getWordList();
    this.getOrganizationList();
  }
};
</script>
<style>
.ivu-tree ul li {
  margin: 0;
}
.ivu-form-item-required .ivu-form-item-label:before {
  display: none;
}
</style>

